<template>
  <div style="padding:20px">
    <el-card>
        <div slot="header" class="clearfix">
            <span>添加用户</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label='用户名' prop='username'>
        <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      
      <div style= 'float:left'>
          <el-form-item label='头像'></el-form-item>
      </div>
      <div style= 'float:left'>
          <el-upload
              class="avatar-uploader"
              :auto-upload="true"
              :data='qiniuData'
              action="http://up-z1.qiniu.com"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </div>
      <div style='clear:both'></div>
      <br  />
      <el-form-item label='电话' prop='phone'>
        <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label='邮箱' prop='email'>
        <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label='公司'>
        <el-select v-model="ruleForm.oid" placeholder="请选择">
          <el-option
            v-for="item in office_list"
            :key="item.id"
            :label="item.office"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>



<script>
import { office_get, uptoken_get, user_post } from "../axios_api/api";
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      imageUrl: "",
      qiniuData: {
        //上传图片携带的参数
        token: "",
        key: ""
      },
      office_list: [],
      ruleForm: {
        username: "",
        pass: "",
        checkPass: "",
        oid: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.get_offices();
    this.get_uptoken();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = "http://qakgy27pn.bkt.clouddn.com/" + this.qiniuData.key;
      this.ruleForm.img = this.qiniuData.key;
    },

    // 生成uuid
    guid2() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return (
        S4() +
        S4() +
        "-" +
        S4() +
        "-" +
        S4() +
        "-" +
        S4() +
        "-" +
        S4() +
        S4() +
        S4()
      );
    },

    // 获取七牛云凭证
    get_uptoken() {
      uptoken_get().then(res => {
        console.log("****************");
        this.qiniuData.token = res.up_token;
        console.log(this.qiniuData);
      });
      // 生成key
      this.qiniuData.key = this.guid2();
    },

    // 上传头图
    post_img() {
      return "https://jsonplaceholder.typicode.com/posts/";
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        return isJPG && isLt2M;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return isJPG && isLt2M;
      }
    },

    // 获取公司列表
    get_offices() {
      office_get({ all: "1" }).then(resp => {
        this.office_list = resp.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          user_post(this.ruleForm).then(resp => {
            this.$message(resp.message);
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-transfer-panel {
  width: 400px;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
</style>
